<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.2/dist/css/layui.css" rel="stylesheet">
    <style>
        table {
            width: 1200px;
            margin: 20px;
            margin: auto;
        }

        #demo-laypage-normal-1 {
            width: 500px;
            margin: auto;
            text-align: center;
            margin-top: 30px;
        }

        .add {
            padding: 20px;
            width: 400px;
            border: 1px solid black;
            margin: auto;
            text-align: center;
            border-radius: 5px;
            margin-bottom: 30px;
            background-color: rgba(172, 202, 235, 0.486);

        }

        .add button {
            background-color: rgb(40, 201, 207);
            border: none;
            color: white;
        }

        .goods tbody td {
            text-align: center;
            width: 300px;
        }

        .goods tbody td button {
            border: none;
            border-radius: 2px;
            background-color: rgb(40, 201, 207);
            color: white;
            padding: 3px;
            box-sizing: border-box;
            margin: 3px;
        }

        .sele1 {
            width: 200px;
            height: 23px;
            margin-top: 10px;
        }

        .goods tbody img {
            width: 50px;
            height: 50px;
            margin: 5px 0;
        }

        .add input {
            width: 200px;
            height: 23px;
            margin-top: 10px;
        }

        .add_btn {
            width: 70px;
            height: 30px;
            font-size: 15px;
            margin-top: 10px;
            border-radius: 3px;
        }

        .add_btn~input {
            height: 20px;

        }

        .query_btn {
            width: 40px;
            height: 25px;
            margin-left: 5px;
            border-radius: 3px;
        }


        .tab {
            display: none;
        }

        .tab.show {
            display: block;
        }

        .sele2 {
            margin-top: 10px;
            margin-right: 3px;
            width: 120px;
            height: 20px;
        }

        .order_btn {
            width: 40px;
            height: 25px;
            margin-top: 10px;
            border-radius: 3px;
        }

        .layui-nav-child {
            width: 80px;
            text-align: center;
        }

        #main1,
        #main2,
        #main3 {
            width: 1000px;
            height: 500px;
            margin: auto;
            border: 1px black solid;
            box-sizing: border-box;
            padding-top: 10px;
            margin-bottom: 30px;
        }

        .personal {
            /* width: 800px; */
            /* border: 1px black solid; */
            margin: auto;
            text-align: center;
        }

        .personal>div:nth-child(1) {
            background-color: rgb(96, 190, 227);
            overflow: hidden;
            /* margin: auto; */
        }

        .pic {
            display: block;
            width: 120px;
            height: 120px;
            margin: auto;
            border-radius: 50%;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        /* 
        .layui-btn {
            color: rgb(85, 185, 185);
            margin-top: 8px;
            font-size: 14px;
            width: 120px;
            height: 23px;
            text-align: center;
            line-height: 23px;
            background-color: white;
            border-radius: 10px;
            border: 1px rgb(85, 185, 185) solid;
        } */

        .personal>div:nth-child(1)>p:nth-child(2) {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 25px;
            text-align: center;
        }

        .basic {
            /* width: 400px; */
            border: 1px solid rgb(145, 143, 143);
            border-left: 5px solid rgb(76, 193, 239);
            margin: 40px 40px 30px 35px;
            border-radius: 5px;
            padding: 20px 20px;
            box-sizing: border-box;
            position: relative;
            text-align: left;
        }

        .basic p {
            font-size: 18px;
            margin-top: 5px;
            font-weight: bold;
        }

        .basic p span {
            font-weight: 400;
        }

        .edit_btn {
            width: 80px;
            height: 30px;
            background-color: rgb(45, 117, 219);
            position: absolute;
            top: 0;
            right: 0;
            border: none;
            border-radius: 3px;
            color: white;
        }

        .vcode {
            width: 80px;
            height: 30px;
            background-color: rgb(45, 117, 219);
            position: absolute;
            bottom: 0;
            right: 0;
            border: none;
            border-radius: 3px;
            color: white;
        }

        .quit_btn {
            width: 150px;
            height: 46px;
            text-align: center;
            margin-right: 15px;
            color: white;
            border-radius: 3px;
            border: none;
            margin: auto;
            background-color: rgb(97, 153, 231);
        }

        /* .layui_form{
            text-align: center;
        } */
        .layui_form input,
        .layui_form select {
            width: 200px;
            height: 20px;
        }

        .layui_form span {
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">商品管理系统</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;">
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        欢迎<span></span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="exit">退出登录</a></dd>
                        <dd><a href="javascript:;" class="logout">注销账号</a></dd>
                        <!-- <dd><a href="javascript:;">Sign out</a></dd> -->
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">

                    <li class="layui-nav-item layui-nav-itemed tabBtn">
                        <a class="" href="javascript:;">商品管理</a>
                    </li>

                    <li class="layui-nav-item tabBtn">
                        <a href="javascript:;">商品可视化</a>
                    </li>
                    <li class="layui-nav-item tabBtn"><a href="javascript:;">个人中心</a></li>
                    <!-- <li class="layui-nav-item"><a href="javascript:;">the links</a></li> -->
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <div class="layui-card layui-panel">
                    <div class="layui-card-header">
                        <div class="goods tab">
                            <div class="add">
                                商品id：<input type="text" readonly><br>
                                商品名称：<input type="text" placeholder="必填项"><br>
                                商品库存：<input type="text" placeholder="必填项"><br>
                                商品价格：<input type="text" placeholder="必填项"><br>
                                商品状态：
                                <select class="sele1">
                                    <option>1</option>
                                    <option>2</option>
                                </select><br>
                                商品图片：<input type="url" placeholder="请填写图片地址，必填项"><br>
                                商品已售：<input type="text" placeholder="必填项"><br>
                                <button class="add_btn">添加</button><br>
                                <input type="text" placeholder="按照商品名称查询">
                                <button class="query_btn">搜索</button><br>
                                <select class="sele2 type">
                                    <option>价格</option>
                                    <option>库存</option>
                                    <option>已售</option>
                                </select>
                                <select class="sele2 order">
                                    <option>升序</option>
                                    <option>降序</option>
                                </select>
                                <button class="order_btn">排序</button>
                            </div>
                            <table cellspacing="0" border="1px">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox"></th>
                                        <th>ID</th>
                                        <th>图片</th>
                                        <th>名称</th>
                                        <th>价格</th>
                                        <th>库存</th>
                                        <th>已售</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                        <th>更新时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <div id="demo-laypage-normal-1"></div>
                        </div>
                        <div class="chart tab">
                            <div id="main1"></div>
                            <div id="main2"></div>
                            <div id="main3"></div>
                        </div>
                        <div class="personCenter tab">
                            <div class="personal">
                                <div>
                                    <img src="" class="pic">
                                    <!-- <button class="change_btn">更换头像</button>
                                <button type="button" class="layui-btn layui-btn-danger" id="ID-upload-demo-size">
                                    <i class="layui-icon layui-icon-upload"></i> 更换头像
                                </button> -->
                                    <p></p>
                                </div>

                                <div class="basic">
                                    <h1>基本信息</h1>
                                    <p>账号：<span></span></p>
                                    <p>出生日期：<span></span></p>
                                    <p>性别：<span></span></p>
                                    <p>电子邮箱：<span></span></p>
                                    <p>手机号：<span></span></p>
                                    <p>部门：<span></span></p>
                                    <p>入职日期：<span></span></p>
                                    <button class="edit_btn">编辑</button>
                                    <button class="vcode">修改密码</button>
                                </div>
                                <button class="exit quit_btn">退出登录</button>
                                <button class="logout quit_btn">注销账号</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 框架 -->
    <script src="//unpkg.com/layui@2.11.2/dist/layui.js"></script>
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <!-- 图表 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>

    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                menuLeft: function (othis) { // 左侧菜单事件
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                },
                menuRight: function () {  // 右侧菜单事件
                    layer.open({
                        type: 1,
                        title: '更多',
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt', // 右上角
                        anim: 'slideLeft', // 从右侧抽屉滑出
                        shadeClose: true,
                        scrollbar: false
                    });
                }
            });
        });

        // 获取本地存储内容
        var record = JSON.parse(localStorage.getItem('record'))
        $('.layui-hide a span').html(record.uname)


        // 侧边tab切换
        function tabChange() {
            $('.tabBtn').eq(0).css({
                'color': 'white',
                'background-color': '#16baaa'
            })

            $('.tabBtn').on('click', function () {
                $('.tabBtn').eq(0).css({
                    'color': 'white',
                    'background-color': 'rgba(0,0,0,0)'
                })
                var index = $(this).index()
                // console.log(index);

                $('.tab').removeClass('show')
                $('.tab').eq(index).addClass('show')
            })
            // 默认第一个显示
            $('.tab').eq(0).addClass('show')
        }
        tabChange()


        // 设置为全局，在分页器中也可以访问到
        var currSort = {
            type: null,   // 'price', 'stock', 'sold'
            order: null   // 'asc', 'desc'
        };
        // sort里边响应数据没有count，所以要定义为全局变量
        var count

        // 分页器函数封装
        function pager(count, currPage, size, isSort = false) {
            layui.use(function () {
                var laypage = layui.laypage;
                // 普通用法
                laypage.render({
                    elem: 'demo-laypage-normal-1',
                    count: count, // 数据总数
                    limit: size,
                    curr: currPage,
                    page: true, // 是否显示分页
                    // limits: [5, 10, 15],
                    jump: (obj, first) => {
                        if (!first) { // 非首次加载时触发
                            // 判断是不是分页功能
                            if (isSort) {
                                sort(obj.curr, obj.limit, currSort.type, currSort.order);
                            } else {
                                data(obj.curr, obj.limit); // 递归加载新页数据
                            }
                        }
                    }
                });
            });
        }


        // 商品数据渲染
        function data(page, limit) {
            $.ajax({
                type: 'GET',
                url: 'https://liu.zzgoodqc.cn/goodsx/listByPage',
                data: {
                    page: page,
                    limit: limit,
                },
                dataType: 'json',
                success: (rel) => {
                    // console.log(rel.data);
                    count = rel.count

                    information(rel.data)   // 这里进行数据渲染
                    pager(count, page, limit)
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        data(1, 5)


        // 数据渲染封装
        function information(data) {
            $('.goods tbody').html('')
            data.forEach((item, index) => {
                $('.goods tbody').append(`
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>${item.id}</th>
                                <th><img src="${item.img}" alt=""></th>
                                <th>${item.goods_name}</th>
                                <th>${item.price}</th>
                                <th>${item.stock}</th>
                                <th>${item.sold}</th>
                                <th>${item.status == 1 ? '上架' : '下架'}</th>
                                <th>${new Date(item.created_at).toLocaleString()}</th>
                                <th>${new Date(item.updated_at).toLocaleString()}</th>
                                <td>
                                    <button onclick="delGoods(${item.id})">删除</button>
                                    <button onclick="modify(${item.id})">修改</button>
                                    <button onclick="details(${item.id})">查看详情</button>
                                    <button onclick="getStatus(${item.id},${item.status})">更新状态</button>
                                </td>
                            </tr>`)
            });
        }

        // 添加数据
        $('.add_btn').click((e) => {
            // console.log(e);
            if (e.target.innerHTML == '添加') {
                // 添加商品
                $.ajax({
                    type: 'POST',
                    url: 'https://liu.zzgoodqc.cn/goodsx/add',
                    data: {
                        goods_name: $('.add input').eq(1).val(),
                        stock: $('.add input').eq(2).val(),
                        price: $('.add input').eq(3).val(),
                        status: $('.add select').val(),
                        sold: $('.add input').eq(5).val(),
                        img: $('.add input').eq(4).val()
                    },
                    dataType: 'json',
                    success: (rel) => {
                        if ($('.add input').eq(1).val() != '' && $('.add input').eq(2).val() != ''
                            && $('.add input').eq(3).val() != '' && $('.add input').eq(4).val() != ''
                            && $('.add input').eq(5).val() != '') {
                            // console.log(rel);
                            data(1, 5);
                        } else {
                            alert('请将要添加的信息填写完整')
                        }

                        $('.add input').eq(1).val('')
                        $('.add input').eq(2).val('')
                        $('.add input').eq(3).val('')
                        $('.add input').eq(4).val('')
                        $('.add input').eq(5).val('')
                        $('.add select').val(1)
                    },
                    error: (e) => {
                        console.log(e);
                    }
                })
            } else if (e.target.innerHTML == '修改') {
                // 修改商品
                $.ajax({
                    type: 'POST',
                    url: 'https://liu.zzgoodqc.cn/goodsx/update',
                    data: {
                        id: $('.add input').eq(0).val(),
                        goods_name: $('.add input').eq(1).val(),
                        stock: $('.add input').eq(2).val(),
                        price: $('.add input').eq(3).val(),
                        status: $('.add select').val(),
                        sold: $('.add input').eq(5).val(),
                        img: $('.add input').eq(4).val()
                    },
                    dataType: 'json',
                    success: (rel) => {
                        // console.log(rel);
                        data(1, 5);

                        // 修改完之后所有的框清空
                        $('.add_btn').html('添加')
                        $('.add input').eq(0).val('')
                        $('.add input').eq(1).val('')
                        $('.add input').eq(2).val('')
                        $('.add input').eq(3).val('')
                        $('.add input').eq(4).val('')
                        $('.add input').eq(5).val('')
                        $('.add select').val(1)
                    },
                    error: (e) => {
                        console.log(e);
                    }
                })
            }
        })


        // 删除商品
        function delGoods(id) {
            $.ajax({
                type: 'GET',
                url: 'https://liu.zzgoodqc.cn/goodsx/delete',
                data: {
                    id: id
                },
                dataType: 'json',
                success: (rel) => {
                    console.log(rel);
                    data(1, 5);
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }



        // 修改商品
        // 先获取数据
        function modify(id) {
            $.ajax({
                type: 'GET',
                url: `https://liu.zzgoodqc.cn/goodsx/detail`,
                data: {
                    id: id
                },
                dataType: 'json',
                success: (rel) => {
                    // console.log(rel.data);
                    $('.add input').eq(0).val(rel.data.id)
                    $('.add input').eq(1).val(rel.data.goods_name)
                    $('.add input').eq(2).val(rel.data.stock)
                    $('.add input').eq(3).val(rel.data.price)
                    $('.add input').eq(4).val(rel.data.img)
                    $('.add input').eq(5).val(rel.data.sold)

                    $('.add_btn').html('修改')
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }



        // 根据商品名称搜索
        $('.query_btn').on('click', function () {
            $.ajax({
                type: 'POST',
                url: 'https://liu.zzgoodqc.cn/goodsx/search',
                data: {
                    goods_name: $('.add input').eq(6).val()
                },
                dataType: 'json',
                success: (rel) => {
                    // 搜索后重新渲染，移除分页器
                    $('#demo-laypage-normal-1').remove()

                    // console.log(rel.data);

                    information(rel.data)
                },
                error: (e) => {
                    console.log(e);
                }
            })
        })


        // 查看详情
        function details(id) {
            $.ajax({
                type: 'GET',
                url: `https://liu.zzgoodqc.cn/goodsx/detail`,
                data: {
                    id: id
                },
                dataType: 'json',
                success: (rel) => {
                    console.log(rel.data);

                    localStorage.setItem('goodsDetail', JSON.stringify(rel.data))
                    location.assign('./商品详情页.html')
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }



        // 商品排序功能封装
        function sort(page, limit, type, order) {
            $.ajax({
                type: 'GET',
                url: 'https://liu.zzgoodqc.cn/goodsx/sort',
                data: {
                    type: type,
                    sort: order,
                    page: page,
                    limit: limit
                },
                dataType: 'json',
                success: (rel) => {

                    currSort.type = type;
                    currSort.order = order;

                    // console.log(count);
                    // console.log(rel.data);

                    // 渲染数据
                    information(rel.data)
                    // 分页器渲染
                    pager(count, page, limit, true)
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }

        // 绑定点击事件排序，用函数封装
        function sortBtn() {
            $('.order_btn').off('click');

            var type = $('.type').val()
            var order = $('.order').val()

            // 按照价格升序
            if (type == '价格' && order == '升序') {
                $('.order_btn').on('click', function () {
                    sort(1, 5, 'price', 'asc')
                })
            } else if (type == '价格' && order == '降序') {
                $('.order_btn').on('click', function () {
                    sort(1, 5, 'price', 'desc')
                })
            } else if (type == '库存' && order == '升序') {
                $('.order_btn').on('click', function () {
                    sort(1, 5, 'stock', 'asc')
                })
            } else if (type == '库存' && order == '降序') {
                $('.order_btn').on('click', function () {
                    sort(1, 5, 'stock', 'desc')
                })
            } else if (type == '已售' && order == '升序') {
                $('.order_btn').on('click', function () {
                    sort(1, 5, 'sold', 'asc')
                })
            } else if (type == '已售' && order == '降序') {
                $('.order_btn').on('click', function () {
                    sort(1, 5, 'sold', 'desc')
                })
            }
        }
        sortBtn()
        // 每次下拉框发生变化重新进行排序
        $('.type, .order').change(function () {
            sortBtn()
        });


        // 更新商品状态
        function getStatus(id, status) {
            if (status == '1') {
                status = 2
            } else if (status == '2') {
                status = 1
            }
            $.ajax({
                type: 'GET',
                url: 'https://liu.zzgoodqc.cn/goodsx/updateStatus',
                data: {
                    id: id,
                    status: status
                },
                dataType: 'json',
                success: (rel) => {
                    console.log(rel);
                    data(1, 5)
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }



        // 右上角点击事件
        // 退出登录
        $('.exit').click(() => {
            location.assign('./登录.html')
        })
        // 注销账号
        $('.logout').click(() => {
            location.assign('./注册.html')
        })



        // 图表
        // 图标一
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));

        // var myChart = echarts.init($('#main1'));
        // 用jquery获取全部商品
        $.ajax({
            type: 'GET',
            url: 'https://liu.zzgoodqc.cn/goodsx/goodslist',
            dataType: 'json',
            success: (rel) => {
                console.log(rel);
                // 获取数据
                var goodsData = rel.data || [];

                // 提取商品名称和价格数据
                let names = [];
                let cost = [];
                let inventory = [];
                let sale = [];
                goodsData.forEach(item => {
                    names.push(item.goods_name);
                    cost.push(item.price);
                    inventory.push(item.stock);
                    sale.push(item.sold)
                });

                option1 = {
                    title: {
                        text: '商品价格统计',
                        top: '0px',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['价格分布'],
                        right: '30px'
                    },
                    xAxis: {
                        type: 'category',
                        data: names,
                    },
                    color: ['#ccc', 'red'],
                    yAxis: {
                        type: 'value',
                        name: '单价（元）',
                        axisLabel: {
                            formatter: '￥{value}'
                        }
                    },
                    series: [
                        // 背景，要显示的数据
                        {
                            name: '价格分布',
                            type: 'bar',
                            // 充当背景
                            z: '-1',
                            // 真实数据
                            barWidth: '60%',
                            data: cost,
                            itemStyle: {
                                color: '#14eca4',
                                borderRadius: [4, 4, 0, 0]
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}元'
                            }
                        }
                    ]
                };

                myChart1.setOption(option1);



                option2 = {
                    title: {
                        text: '商品库存统计',
                        top: '0px',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: names,
                            axisLine: {
                                lineStyle: {
                                    color: '#999'
                                }
                            },
                            axisTick: {
                                show: false // 取消 x 轴刻度
                            }
                        }
                    ],
                    yAxis: [
                        {
                            name: '数量',
                            type: 'value',
                            splitNumber: 4,
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#DDD'
                                }
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#333'
                                }
                            },
                            nameTextStyle: {
                                color: '#999'
                            },
                            splitArea: {
                                show: false
                            }
                        }
                    ],
                    series: [
                        {
                            name: '数量',
                            type: 'line',
                            data: inventory,
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgba(36, 98, 255, 0)' },
                                        { offset: 0.5, color: 'rgba(36, 98, 255, 1)' },
                                        { offset: 1, color: 'rgba(36, 98, 255, 0)' }
                                    ]),
                                    shadowColor: 'rgba(36, 98, 255, 1)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 7
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#fff',
                                    borderWidth: 10,
                                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                                          shadowBlur: 100,*/
                                    borderColor: '#A9F387'
                                }
                            },
                            smooth: true,
                            symbol: 'none' // 设置拐点不显示
                        }
                    ]
                };

                myChart2.setOption(option2);



                const color = ["#3254DD", "#EF7BE3", "#22E59C", "#F9925A", "#22E5E5"]
                const datas = [{ value: sale, names: names }]
                const pieData = names.map((name, index) => {
                    return {
                        name: name,
                        value: sale[index],
                        itemStyle: { color: color[index % color.length] } // 循环使用颜色
                    }
                });
                // console.log(pieData);

                option3 = {
                    title: {
                        text: '商品销量占比分析',
                        left: 'center'
                    },
                    color: color,
                    tooltip: {
                        trigger: "item",
                        extraCssText: "width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);",
                        formatter: function (params) {
                            let str =
                                (params.data &&
                                    `<div style="font-weight: bold;">${params.name}</div>
                                     <div style="display:flex; justify-content: space-between; align-items: center;">
                                         <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%;
                                             background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>占比</span>
                                         <span>${params.percent}%</span>
                                     </div>`) ||
                                "";
                            return str;
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        right: 10,
                        top: 'center',
                        data: names,
                        formatter: function (name) {
                            const item = pieData.find(d => d.name === name);
                            return `${name} (${item ? item.value : 0}件)`;
                        }
                    },

                    series: [{
                        type: "pie",
                        radius: ["40%", "70%"],  // 环形图效果
                        avoidLabelOverlap: true,
                        label: {
                            show: true,
                            formatter: "{b}: {c}件 ({d}%)",  // 显示名称、数值和百分比
                            fontSize: 12
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 14,
                                fontWeight: 'bold'
                            }
                        },
                        data: pieData,
                        itemStyle: {
                            borderRadius: 5,  // 圆角
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        labelLine: {
                            show: true,
                            length: 10,
                            length2: 15,
                            smooth: true
                        }
                    }]
                };

                myChart3.setOption(option3);
            },
            error: (e) => {
                console.log(e);
            }
        })



        // 个人中心
        // 修改头像
        // 获取头像地址
        var pthotoSrc = $('.layui-nav-img').prop('src');
        // console.log(pthotoSrc);
        $('.pic').prop('src', pthotoSrc)
        $('.personal p').eq(0).html(record.uname)
        var message = JSON.parse(localStorage.getItem('message'))
        // console.log(message);
        $('.personal span').eq(0).html(message.account)
        $('.personal span').eq(1).html(message.date)
        $('.personal span').eq(2).html(message.sex)
        $('.personal span').eq(3).html(message.email1)
        $('.personal span').eq(4).html(message.phoneNumber)
        $('.personal span').eq(5).html(message.branch)
        $('.personal span').eq(6).html(message.entry)



        // 修改
        layui.use(['layer', 'form', 'laydate'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var laydate = layui.laydate;
            var $ = layui.$;

            // 编辑基本信息
            $('.edit_btn').on('click', function () {
                // 获取当前显示的值
                var currentValues = {
                    account: $('.personal span').eq(0).text(),
                    date: $('.personal span').eq(1).text(),
                    sex: $('.personal span').eq(2).text(),
                    email1: $('.personal span').eq(3).text(),
                    phoneNumber: $('.personal span').eq(4).text(),
                    branch: $('.personal span').eq(5).text(),
                    entry: $('.personal span').eq(6).text()
                };

                layer.open({
                    type: 1,
                    title: '编辑基本信息',
                    area: ['500px', '500px'],
                    content: `
                    <form class="layui-form" style="padding: 20px;">
                        <div class="layui-form-item">
                          <label class="layui-form-label">账号</label>
                          <div class="layui-input-block">
                            <input type="text" class="layui-input" value="${currentValues.account}" readonly>
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">性别</label>
                          <div class="layui-input-block">
                            <select name="sex" class="layui-input">
                              <option value="男" ${currentValues.sex === '男' ? 'selected' : ''}>男</option>
                              <option value="女" ${currentValues.sex === '女' ? 'selected' : ''}>女</option>
                            </select>
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">出生日期</label>
                          <div class="layui-input-block">
                            <input type="date" name="date" class="layui-input" value="${currentValues.date}">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">电子邮箱</label>
                          <div class="layui-input-block">
                            <input type="email" name="email1" class="layui-input" value="${currentValues.email1}">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">手机号</label>
                          <div class="layui-input-block">
                            <input type="text" name="phoneNumber" class="layui-input" value="${currentValues.phoneNumber}">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">部门</label>
                          <div class="layui-input-block">
                            <input type="text" name="branch" class="layui-input" value="${currentValues.branch}">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">入职日期</label>
                          <div class="layui-input-block">
                            <input type="date" name="entry" class="layui-input" value="${currentValues.entry}">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="editForm">提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                          </div>
                        </div>
                      </form>
                    `,

                    success: function () {
                        // 初始化日期选择器
                        laydate.render({
                            elem: '#date'
                        });

                        laydate.render({
                            elem: '#entry'
                        });

                        // 重新渲染表单
                        form.render();
                    }
                });

                // 表单提交
                form.on('submit(editForm)', function (data) {
                    // 更新页面显示的数据
                    $('.personal span').eq(1).text(data.field.date);
                    $('.personal span').eq(2).text(data.field.sex);
                    $('.personal span').eq(3).text(data.field.email1);
                    $('.personal span').eq(4).text(data.field.phoneNumber);
                    $('.personal span').eq(5).text(data.field.branch);
                    $('.personal span').eq(6).text(data.field.entry);

                    // 这里可以添加AJAX提交到服务器的代码
                    // $.post('/api/updateInfo', data.field, function(res){...});

                    layer.msg('修改成功');
                    layer.closeAll();
                    return false;
                });
            });
        });

        
    </script>
</body>

</html>